<template>
  <div class="bgArea">
    <div class="header">
      <div style="width: 200px" class="title_div" @click="toHome()">
        <h2 class="title_h2">
          <i class="el-icon-s-home"></i>
          弄个房租</h2>
      </div>
    </div>
    <div class="area_body">
      <div style="margin-top: 10px;height: 50px">
        <p style="float: left;margin-left: 30px">热门城市:</p>
        <div style="margin-left: 55px;">
          <ul>
            <li style="display: inline-block;margin: 12px;float: left;color: #00ae66" v-for="item in fireArea" @click="selectArea(item)"
                :key="item">{{ item.areaName }}
            </li>
          </ul>
        </div>
      </div>
      <div>
        <p style="margin-left: 30px;float: left;">按字母排序:</p>
        <br>
        <br>
        <br>
      </div>
      <div>
        <div style=" margin-top: 5px;display: flex;" v-for="(group,key) in AreaGroup" :key="group">
          <br>
          <div style="float: left;margin-left: 30px;width: 10px"><span>{{ key }}：</span></div>
          <div style="float: left;margin-left: 15px;width: 100%">
            <ul>
              <li style="display: inline-block;padding: 5px; float: left;color: #404040" v-for="item in group" @click="selectArea(item)"
                  :key="item">{{ item.areaName }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AreaModule",
  data() {
    return {
      fireArea: [{areaId:'2',areaName: '北京'}, {areaId:'793',areaName: '上海'}, {areaId:'2278',areaName: '成都'}],
      AreaGroup: [],
    }
  },
  mounted() {
    this.getAreaGroupFirst()
  },
  methods: {
    getAreaGroupFirst() {
      this.$axios({
        url: "/getAreaGroupFirst",
        method: "get"
      }).then(res => {
        this.AreaGroup = res.data.data
      })
    },
    selectArea(area){
      let area1 = {areaId:area.areaId,areaName:area.areaName}
      let josn = JSON.stringify(area1)
      window.localStorage.setItem("area",josn);
      this.$router.push({path: "/"})
    },
    toHome() {
      this.$router.push({path: "/"})
    },
  }

}
</script>

<style scoped>
.bgArea {
  height: 2000px;
  background-color: #f1f1f1;
}

.header {
  height: 60px;
  background-color: #72c86f;
  margin-top: 0px;
}

.title_h2 {
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}

.area_body {
  padding: 20px;
  height: 1700px;
  width: 70%;
  margin-top: 30px;
  float: right;
  margin-right: 15%;
  background-color: white;
  font-size: 13px;
}

li:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

.title_div :hover{
  cursor: pointer;
}
</style>
